<template>
	<view>
		<scroll-view class="scroll" scroll-y>
			<view class="jobTitle">
				<view class="jobUp">
					<view class="jobName">{{job}}</view>
					<view class="jobPrice">{{price}}</view>
				</view>
				<view class="area">
					<view class="uicon">
						<uni-icons type="location" size="20">12323</uni-icons>
					</view>
					<view class="address">{{address}}</view>
				</view>
			</view>

			<view class="interview">
				<view class="cover">
					<image :src="cover" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="right-interview">{{interviewer}}</view>
					<view class="company">{{company}} · {{guan}}</view>
				</view>
			</view>

			<view class="content">
				<view class="detail">职位详情</view>
				<view class="label">
					<view class="labelson" v-for="item in label">{{item}}</view>
				</view>
				<view class="context">
					<view>岗位职责:</view>
					<view class="content-gw" v-for="(item,index) in context">
						<!-- <view class="content-gw-son"  v-for="item in context">{{item.content}}</view> -->
						<view class="content-gw-son" style="margin-left: 20rpx;">{{index+1}}.{{item}}</view>
						<!-- <li class="content-gw-son">{{context}}</li> -->
					</view>
				</view>
			</view>

			<view class="interview companyIntro">
				<view class="cover">
					<image :src="company_cover" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="right-interview">{{company}}</view>
					<view class="company">{{company_intro}}</view>
				</view>
			</view>

			<view class="addressMap" v-show="isNotAPP">
				<map :v-if="isShow" :style="{width: windowWidth, height:windowHeight}" :latitude="latitude"
					:longitude="longitude" :markers="covers">
				</map>
				<view :v-if="!isShow" class="WXMap">
					<image :src="src" mode="aspectFill"></image>
					<view class="end"></view>
				</view>
			</view>

		</scroll-view>

		<view class="goutong" @click="toTaik(id,interviewer)">
			<button>立即沟通</button>
		</view>
	</view>
</template>

<script>
	import amap from '@/utils/amap-wx.130.js';
	import {
		config
	} from '@/common/config.js';
	import {
		getDetail
	} from '@/common/mock/mock.js';
	export default {
		data() {
			return {
				isNotAPP: true,
				isShow: '',
				id: '',
				job: '',
				price: '',
				address: '',
				cover: '',
				company_cover: '',
				company_intro: '',
				interviewer: '',
				context: [],
				label: [],
				company: '',
				guan: '',
				company_size: '',
				// location: [],
				windowHeight: '',
				windowWidth: '',
				src: '',
				latitude: '',
				longitude: '',
				covers: []
			}
		},
		onLoad(option) {
			if (option.id) {
				this.getData(option.id);
			} else {
				uni.showToast({
					title: '没有option.id'
				})
			}
			console.log(this.id);
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: '#00b4b3'
			});
			this.amapPlugin = new amap.AMapWX({
				key: config.wx_key
			})
			this.getLoc()
			console.log("isNotAPP:" + this.isNotAPP)
		},
		methods: {
			getData(id) {
				// #ifndef APP-PLUS
				// uniCloud云函数
				// this.$api.get_detail({
				// 	name: 'get_detail',
				// 	id: id
				// }).then((res) => {
				// 	this.id = res.data._id,
				// 		this.job = res.data.job,
				// 		this.price = res.data.price,
				// 		this.address = res.data.address,
				// 		this.cover = res.data.cover,
				// 		this.interviewer = res.data.interviewer,
				// 		this.context = res.data.context,
				// 		this.label = res.data.label,
				// 		this.company = res.data.company,
				// 		this.company_size = res.data.company_size,
				// 		this.company_cover = res.data.company_cover,
				// 		this.company_intro = res.data.company_intro,
				// 		this.guan = res.data.guan,
				// 		this.longitude = res.data.longitude,
				// 		this.latitude = res.data.latitude
				// })
				
				uni.request({
					url:config.url+'job/detail',
					data:{
						id:id
					},
					success: (res) => {
						console.log(res);
						this.id = res.data.data.id,
						this.job = res.data.data.job,
						this.price = res.data.data.price,
						this.address = res.data.data.address,
						this.cover = res.data.data.cover,
						this.interviewer = res.data.data.interviewer,
						this.context = res.data.data.context,
						this.label = res.data.data.label,
						this.company = res.data.data.company,
						this.company_size = res.data.data.company_size,
						this.company_cover = res.data.data.company_cover,
						this.company_intro = res.data.data.company_intro,
						this.guan = res.data.data.guan,
						this.longitude = res.data.data.longitude,
						this.latitude = res.data.data.latitude
					},
				})
				console.log(this.company_cover);
				// #endif

				// #ifdef APP-PLUS
				// mock
				getDetail("657c06108b0da41d31e4f3cf").then((res) => {
					this.id = res._id.$oid,
						this.job = res.job,
						this.price = res.price,
						this.address = res.address,
						this.cover = res.cover,
						this.interviewer = res.interviewer,
						this.context = res.context,
						this.label = res.label,
						this.company = res.company,
						this.company_size = res.company_size,
						this.company_cover = res.company_cover,
						this.company_intro = res.company_intro,
						this.guan = res.guan,
						this.longitude = res.longitude,
						this.latitude = res.latitude
					// this.location: []
				})
				// #endif
			},
			async getLoc() {
				// #ifdef APP-PLUS
				this.isNotAPP = false
				// #endif

				// #ifdef MP-WEIXIN
				var that = this
				await this.amapPlugin.getRegeo({
					success: function(data) {
						//成功回调
						console.log(data)
						// this.latitude = data[0].latitude
						// this.longitude = data[0].longitude
						var lat = this.latitude
						var lon = this.longitude
						var amapPlugin = that.amapPlugin
						wx.getSystemInfo({
							success: function(data) {
								console.log(data)
								// this.windowHeight = 100;
								this.windowHeight = 230;
								this.windowWidth = data.windowWidth - 30;
								var size = this.windowWidth + "*" + this.windowHeight;
								var markers = "mid,0xFF0000,A:" + lat + ',' + lon;
								console.log(markers);
								amapPlugin.getStaticmap({
									zoom: 16,
									size: size,
									scale: 1,
									markers: markers,
									success: function(data) {
										console.log(data.url)
										that.src = data.url
									},
									fail: function(info) {
										wx.showModal({
											title: info.errMsg
										})
									}
								})

							}
						})
					},
					fail: function(info) {
						//失败回调
						console.log(info)
					}
				})
				this.isShow = false
				// #endif

				// #ifdef H5
				await uni.getLocation({
					success: (res) => {
						// this.windowHeight = uni.getWindowInfo().windowHeight + 'px',
						this.windowWidth = uni.getWindowInfo().windowWidth + 'px',
						this.windowHeight = '250px',
							// this.windowWidth = '400px',

							// 这是不在线获取经纬度，直接从静态数据获取经纬度
							// this.longitude = res.longitude,
							// this.latitude = res.latitude,
						this.covers = [{
							latitude: this.latitude,
							longitude: this.longitude,
							iconPath: '../../static/marker.png'
						}]
					}
				})


				this.isShow = true
				// #endif
				console.log("h5:" + this.isShow)
				console.log("wx:" + !this.isShow)

			},
			toTaik(_id, interviewer) {
				if (!this.$store.state.isLogin) {
					console.log("请先进行登录")
					this.$u.route('pages/login/login')
				} else {
					this.$u.route('pages/chat/chat', {
						id: _id,
						boss: interviewer
					})
				}

			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background: gainsboro;
	}

	.scroll {
		width: 100%;	//96
		height: 92%;
		margin: 0 auto;
		background-image: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);

		.jobTitle {
			height: 65px;
			padding: 6px;
			display: flex;
			flex-direction: column;

			.jobUp {
				position: relative;
				margin: 0 6px 6px 6px;
				top: 5px;

				.jobName {
					position: absolute;
					font-size: 28px;
				}

				.jobPrice {
					float: right;
					font-size: 18px;
					margin-top: 5px;
					color: $boss-base-color;
				}

			}

			.area {
				// background: blue;
				// margin-top: 4px;
				margin-top: 10px;

				.uicon {

					position: absolute;
					// display: flex;
					// justify-content: center;
					// align-items: center;
					// width: 45px;
				}

				.address {
					margin-left: 25px;
					font-size: 15px;
					color: grey;
				}
			}
		}

		.interview {
			padding: 8px 0;
			border-top: 1px solid lightslategrey;
			border-bottom: 1px solid lightslategrey;
			display: flex;
			flex-direction: row;

			image {
				flex-shrink: 0;
				border-radius: 50%;
				overflow: hidden;
				width: 75px;
				height: 75px;
				margin: 2px;
			}

			.right {
				padding: 6px;
				margin-left: 10px;

				.right-interview {
					font-size: 18px;
					margin-bottom: 18px;
				}

				.company {
					font-size: 14px;
				}
			}

		}

		.content {
			// background: yellow;

			.detail {
				padding: 10px 0 4px 10px;
				font-size: 16px;
			}

			.label {
				display: flex;
				flex-direction: row;
				margin: 10px 0;

				.labelson {
					border-radius: 8px;
					background: #FFCC99;
					margin: 3px 5px;
					padding: 0 8px;
					// padding: 2px;
				}
			}

			.context {
				font-size: 14px;
				margin-left: 10px;

				.content-gw {
					margin-bottom: 15px;

					// background: red;
					.content-gw-son {
						margin: 10px 0;
					}
				}
			}

		}

		.addressMap {
			width: 100%;
			height: 320px;
			margin: 10px;
			border-radius: 10px;
			position: relative;
			// border: 1px solid gray;

			.WXMap {
				width: 100%;
				position: absolute;

				image {
					height: 230px;
					flex-shrink: 0;
					overflow: hidden;
					margin: 10px;
					border-radius: 20px;

				}

				.end {
					display: flex;
					height: 20%;
					// background: blue;
					border-bottom: 0;
				}
			}

			map {
				height: 100%;
				margin: 0 auto;
				position: absolute;
				border-radius: 50%;
			}
		}
	}

	.goutong {
		width: 100%;
		height: 8%;
		position: fixed;
		bottom: 0px;
		background: white;
		font-size: 24px;
		display: flex;
		align-items: center;

		button {
			width: 90%;
			margin: 0 auto;
			border-radius: 20px;
			background: $boss-base-color;
			box-shadow: 0 0 7rpx 7rpx #CCCCCC;
		}
		button:active {
			width: 90%;
			margin: 0 auto;
			border-radius: 20px;
			background: $boss-base-color;
			button {
				width: 90%;
				margin: 0 auto;
				border-radius: 20px;
				background: $boss-base-color;
				-webkit-animation: scale-up-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) ;
					        animation: scale-up-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) ;
			}
		}
	}
</style>